import { Icon } from "@iconify/react";
import { Card } from "antd";
import { useSelector } from "react-redux";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import styled from "styled-components";
import { useState } from "react";
dayjs.extend(duration);

const Styled = styled.div`
  .animate-bang {
    animation: bang 0.8s linear infinite;
  }

  @keyframes bang {
    0%,
    100% {
      transform: scale(1.1);
    }
    50% {
      transform: scale(0.9);
    }
  }
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 2.5rem;
    font-size: 4.5rem;
    span {
      margin-left: 1.75rem;
    }
  }
  .time,
  .count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
  }
`;

const WebsiteInfo = () => {
  const {
    blogInfo: { blog_config, view_count },
  } = useSelector((state) => state.app);
  // 每秒刷新时间
  let [runTime, setRunTime] = useState("");

  // 每秒刷新当前时间
  setInterval(() => {
    const createtime = dayjs(blog_config.website_createtime);
    //创建的当前时间和createtime的时间差
    setRunTime(
      dayjs.duration(dayjs().diff(createtime)).format("D 天 H 时 m 分 s 秒")
    );
  }, 1000);
  return (
    <Styled className="animate-zoom-in ">
      <Card style={{ minWidth: 300 }} hoverable>
        <p className="title">
          <Icon className="animate-bang " icon="mdi:web" />
          <span>网站咨询</span>
        </p>
        <p className="time">
          <span>运行时间：</span>
          <span>{runTime}</span>
        </p>
        <p className="count">
          <span>访问总量：</span>
          <span>{view_count}</span>
        </p>
      </Card>
    </Styled>
  );
};

export default WebsiteInfo;
